<script type="text/javascript">

function editDocumentGroups() {
        var row_id = $("#documentGroupsTable").getGridParam("selrow");
        if(!row_id)
        {
            $("#dialog").data('title.dialog', "No row selected" );
            $("#dialog p").text("Please select a group");
            $("#dialog").dialog('open');
        } else {
            document.location='/document/show-document-table-grid/groupid/'  + row_id;
        }
}

$(document).ready(function() {

        $("#dialog").dialog({
            bgiframe: true,
            modal: true,
            autoOpen: false,
            resizable: false,
            buttons: {
                Ok: function() {
                    $(this).dialog('close');
                }
            }
        });


    jQuery("#documentGroupsTable").jqGrid({
           sortable: true,
           ajaxGridOptions : {type:"POST"},
           url:'/document/get-document-groups-table-json',
           datatype: "json",
           colNames:['Id','Title', 'Description', 'Timestamp'],
           colModel:[ {name:'id',index:'id', width:55},
               {name:'title',index:'title',width:150,editable:true},
               {name:'description',index:'description', width:150,editable:true},
               {name:'timestamp',index:'timestamp', width:160}],
           rowNum:20,
           rowList:[10,20,30,40,50],
           imgpath: '/js/jqGrid/themes/<?=$this->jqGridTheme?>/images',
           pager: '#pager2',
           sortname: 'id',
           viewrecords: true,
           sortorder: "asc",
           editurl:'/document/set-document-groups-table-json',
           caption:"Documents Groups" }).
           navGrid('#pager2',{edit:true,add:true,del:true})
               .navButtonAdd("#pager2",{
                 caption:"Edit DocumentGroups",
                 onClickButton:editDocumentGroups,
                 position:"last",
                 title:"Add/Remove Document Group"})


});


</script>
<h3> Document Groups</h3> <input type="button" value="add document"/><hr/>
<table id="documentGroupsTable" class="scroll" cellpadding="0" cellspacing="0">
</table>
<div id="pager2" class="scroll" style="text-align:center;"></div>

<div id="dialog" class="dialog" title="">
    <p>
    </p>
</div>

